<template>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="line-height:60px;font-size:20px;">公告列表</span>
    <el-button type="primary" style="float: right;margin-top: 10px;"
               @click="beforeAddUser">编写新的公告</el-button>
  </div>
  <!-- 新建流程弹窗 -->
  <!-- :before-close="handleClose" 在弹窗关闭前先调用handleClose方法来处理弹窗的关闭问题
   避免点击弹窗外部也能关闭弹窗-->
  <el-dialog
      :title="dialogTitle"
      style="width: 1000px;padding: 40px;"
      v-model="dialogVisible"
      :before-close="handleClose"
  >
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="18">
          <el-form-item label="公告标题">
            <el-input placeholder="请输入" v-model="saveAnnouncementForm.title"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="18">
          <el-form-item label="公告类型">
            <el-select placeholder="请选择" v-model="saveAnnouncementForm.type"  @change="loadAnnouncement">
              <el-option v-for="item in announcementTypeArr"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布人">
            <el-input readonly :value="saveAnnouncementForm.username" ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-input
              type="textarea"
              placeholder="请输入公告内容"
              v-model="saveAnnouncementForm.content"
              :rows="10"
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="状态">
            <el-radio-group v-model="saveAnnouncementForm.status">
              <el-radio border label="启用" value="1" style="margin:0;"></el-radio>
              <el-radio border label="禁用" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveUser">发布</el-button>
    </template>
  </el-dialog>
<!--公告内容弹窗-->
  <el-dialog
      :title="dialogContentTitle"
      style="width: 1000px;padding: 40px;"
      v-model="dialogContentVisible"
      :before-close="handleClose">
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="公告标题">
            <el-input placeholder="请输入" v-model="saveAnnouncementForm.title" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="发布人">
            <el-input placeholder="请输入" v-model="saveAnnouncementForm.username" readonly></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-input
              type="textarea"
              v-model="saveAnnouncementForm.content"
              :rows="15"
              readonly
              style="font-size: large"
          >
          </el-input>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>

  <!-- 审批流程卡片 -->
  <el-card style="margin: 20px;">
    <el-table :data="announcementArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="type" label="公告类型" align="center"
                       :formatter=" announcementTypeFormatter "></el-table-column>
      <el-table-column prop="title" label="公告标题" align="center" width="400px" >
        <template #default="scope">
          <el-button link type="primary" size="small" @click="showContent(scope.row.id)">{{ scope.row.title }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="createdTime" label="发布时间" align="center"/>
      <el-table-column prop="username" label="发布人" align="center" ></el-table-column>
      <el-table-column prop="status" label="状态" align="center"
      :formatter="statusTypeFormatter"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="editAnnouncementProces(scope.row.id)">编辑</el-button>
          <el-button link type="primary" @click="deleteAnnouncementProces(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

//定义变量控制弹窗是否出现
const dialogVisible = ref(false);
//定义变量用来控制弹窗的标题
const dialogTitle = ref('新建公告');
//定义变量控制弹窗是否出现
const dialogContentVisible = ref(false);
//定义变量用来控制弹窗的标题
const dialogContentTitle = ref('公告详情');
//定义数组保存时间
const times = ref([]);
const showContent =(id)=>{
  dialogContentVisible.value = true;
  dialogContentTitle.value = '公告详情';
  axios.get(BASE_URL+'/oa1/announcement/select?id='+id).then((response)=>{
    if(response.data.code == 2000){
      //注意！后端返回的是List,我们需要取出list中的第1条数据！！
      saveAnnouncementForm.value = response.data.data[0];
    }else{
      ElMessage.error(response.data.msg)
    }
  })
}


// 用户列表
const users = ref(getUser());
//定义对象用来收集保存表单的数据
const saveAnnouncementForm = ref({
  title:'',
  content:'',
  createTime:'',
  userId:'',
  type:'',
  status:'',
  publishTime:'',
  updateTime:'',
});
/* 点击"新建"按钮,出弹窗+修改弹窗标题 */
const beforeAddUser = ()=>{
  dialogVisible.value = true;
  dialogTitle.value = '新建公告';
  saveAnnouncementForm.value = {
    material: '',
    repairTime: '',
    item: '',
    fee: '',
    addr: '',
    status: '',
    license: '',
    vehicleId: '',
    username: users.value.username // 设置当前登录用户的用户名
  };
}
//定义保存用户的方法
const saveUser = ()=>{
  console.log(saveAnnouncementForm.value);
  saveAnnouncementForm.value.userId = users.value.id;
  saveAnnouncementForm.value.username = users.value.username;
  /* 安装查询字符串框架qs  npm install qs
  使用qs框架将JS对象转为查询字符串格式 name=tom&age=18,注意qs需要导入!!! import qs from "qs"; */
  let data = qs.stringify(saveAnnouncementForm.value);
  console.log(data);
  //向后端发送保存员工的请求
  /* 此处传的参数是qs转换后的查询字符串data,注意:使用了查询字符串,后端Controller不用加@RequestBody注解!!! */
  axios.post(BASE_URL+'/oa1/announcement/save',data)
      .then((response)=>{
        if(response.data.code == 2000){
          ElMessage.success('保存成功!');
          //关闭弹窗,并清空双向绑定的表单数据
          dialogVisible.value = false;
          saveAnnouncementForm.value = {};
          loadAnnouncement();
          //保存成功后要重新加载用户数据!
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
//处理弹窗关闭的方法
const handleClose = ()=>{
  if(confirm('您确认要关闭本窗口吗?')){
    //关闭弹窗,并清空双向绑定的表单数据
    dialogVisible.value = false;
    saveAnnouncementForm.value = {};
    dialogContentVisible.value= false;
    saveAnnouncementForm.value = {};
  }
}

//定义对象用来保存查询条件
const searchAnnouncementForm = ref({announcementModule:'', status:'',name:''});
//定义对象保存查询到的表格数据
const announcementArr = ref([]);
//定义加载用户的方法
const loadAnnouncement = ()=>{
  let data = qs.stringify(searchAnnouncementForm.value);//username=tom&status=1
  //如果有查询条件,就根据后面拼接的条件查,没有条件默认加载所有用户数据
  axios.get(BASE_URL+'/oa1/announcement/select?'+data)
      .then((response)=>{//回调函数中处理响应结果
        if(response.data.code == 2000){
          announcementArr.value = response.data.data;//将后端响应数据装入用户数组中
          console.log(announcementArr.value);
        }else{
          ElMessage.error(response.data.msg);
        }
      })
}
//定义重置搜索条件的方法
const resetSearch = ()=>{
  //清空之前的搜索条件
  searchAnnouncementForm.value = {};
  //重新加载所有的用户数据
  loadAnnouncement();
}

/* 页面一加载完毕,立即执行 */
onMounted(()=>{
  loadAnnouncement()
})

//创建修改审批流程的选项
//创建删除员工的方法
const deleteAnnouncementProces = (id)=>{
  if(confirm('您确认要删除该数据吗?')){
    axios.post(BASE_URL+'/oa1/announcement/delete/'+id)
        .then((response)=>{
          if(response.data.code == 2000){
            ElMessage.success('删除成功!');
            loadAnnouncement();
          }else{
            ElMessage.error(response.data.msg);
          }
        })
  }
}
//定义状态
const statusTypeArr = ref([]);
const statusTypeFormatter = (row,column,cellValue,index)=>{
  if(!statusTypeArr.value){
    return cellValue;
  }
  for(let item of statusTypeArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
//定义模块
const announcementTypeArr = ref([]);
const announcementTypeFormatter = (row,column,cellValue,index)=>{
  if(!announcementTypeArr.value){
    return cellValue;
  }
  for(let item of announcementTypeArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
const announcementProcessArr = ref([]);
const announcementProcessFormatter = (row,column,cellValue,index)=>{
  if(!moduleTypeArr.value){
    return cellValue;
  }
  for(let item of announcementProcessArr.value){
    if(item.value == cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}

onMounted(()=>{
  loadDictOption(announcementTypeArr,'announcement_type');
  loadDictOption(statusTypeArr,'general_status');
})
const editAnnouncementProces = (id)=>{
  dialogVisible.value = true;
  dialogTitle.value = '修改公告';
  axios.get(BASE_URL+'/oa1/announcement/select?id='+id).then((response)=>{
    if(response.data.code == 2000){
      saveAnnouncementForm.value = response.data.data[0];
      dialogVisible.value = true;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
</script>

<style scoped>
</style>